<template>
<div>
    <div class="box" :class="{'box-bg':visible}"></div>
    <button @click="visible=!visible">动态改变css</button>
</div>
</template>
<script>
export default {
    methods:{
        add:{}
    },
    data(){
        return{
            visible:false
        }
    }
}
</script>
<style scoped>
.box{
    width: 200px;
    height: 200px;
    margin: 20px auto;
    
    background-color: red;
    transition: all 1s;
}
.box-bg{
    background-color: green;
    width: 400px;
    height: 400px;
}
.box:hover{
    background-color: blue;
    width: 400px;
    transform: scale(2,3) translate(-100px,50px);
}
</style>